<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/together.css" rel="stylesheet" />
		
		<style>
			
			.body.mui-fullscreen {
			    position: relative;
			    /*height: 1200px;*/
			}
			.body .mui-fullscreen .mui-segmented-control~.mui-slider-group {
			    position: relative;
			    top: 0;
			}
			.ic{
				height: 100%;
				display: flex;
				align-items: center;
				font-family: Muiicons;
			    font-size: 38px;
			    line-height: 1;
			    z-index: 20;
			    padding-top: 10px;
			    padding-bottom: 10px;
			    color: #199ED8;
			}
			.mui-scroll{
				
			}
			.mr5{
				margin-right: 0.2em !important;
			}
			.fs-1{
				font-size: 1em;
			}
			
			.ws_books_top {
				/*position: fixed;*/
				top: 0;
				z-index: 9;
			    padding: 44px 0.5rem 0.5rem;
			    width: 100%;
			    border-bottom: 6px solid #EBF3FE;
			    color: #fff;
			    background: url(../images/books_bg.png);
			    background-size: 100% auto;
			}
			.mui-slider-group{
				width: 100%;
				height: calc(70vh - 40px); 
				overflow: scroll;
				border-bottom:0;
			}
			  .gd{
			  	height: 80px;
			  	width: 100%;
			  } 
			  .flex2>div{
			  	padding: 0.2em 0;
			  }
			  
			  
			  .mui-segmented-control .mui-control-item.mui-active {
			    color: black;
			    background-color: white;
			    border-bottom: 1px solid #C0C0C0;
			}
			.ws-item{
				background-color: white;
			}
		.mui-segmented-control{
			border: 0;
		}
		.mui-segmented-control .mui-control-item {
		    line-height: 38px;
		    display: table-cell;
		    overflow: hidden;
		    width: 1%;
		    -webkit-transition: background-color .1s linear;
		    transition: background-color .1s linear;
		    text-align: center;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    color: black;
		    border: 0;
		    /*
		    border-left: 1px solid #007aff;*/
		}
		
		.ws_bottom{
				width: 100%;
			    height: 50px;
			    line-height: 50px;
			    position: fixed;
			    bottom: 0;
			    box-shadow: 0px -2px 5px rgba(205, 224, 255, .4);
			    background: #fff;
			    font-size: 1em;
			    z-index: 99;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
			.ws_50{
				width: 50%;
			}
			.ws_33{
				width: 33%;
			}
			.bright{
				border-right:1px solid #C0C0C0 ;
			}
			.mui-content{
				min-height: 100vh !important;
				height: auto !important;
				background-color: #FFFFFF;
			}
			.borrad50{
				border-radius: 50%;
			}
			.flex-jcsb-aicent{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
			.flex-jcsb-aifs{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
			.flex-jccent-aicent{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.flex-jcsb-aifs>.deldiv{
				width: 15%;
				height: 100%;
				text-align: center;
				
			}
			.flex-jcsb-aifs>.flex1{
				width: 80%;
			}
			.lipay{display: flex; justify-content:space-between; align-items: center;}
		</style>
	</head>
	
	<body>
		<header class="mui-bar  mui-bar-transparent m_barw">
		 	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">一起写</h1>
		  
		    <a class="ws-icon ws_100  mui-icon-right-nav mui-pull-right mr5" onclick="yaoqing()">
		    	<img src="../images/forward.png" alt="" />
		    </a>
		      <a class="ws-icon ws_100  mui-icon-right-nav mui-pull-right " onclick="seting()">
		    	<img src="../images/set.png" alt=""/>
		    </a>
		</header>

		
		<div class="mui-content " >
			<div class="ws_books_top flex6" id="topdivid">
				<div class="mui-col-xs-4 mui-col-sm-4">
					<div class="ws_books_img">
						<img src="" id="bgimg" alt="">
						<div class="ws_books_title">
							<div class="bname">我们的旅行</div>
							<div class="zname">作者</div>
						</div>
					</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-8 flex2">
					<div class="bname">我们的旅行</div>
					<div class="zname">创建于2018.11.28</div>
					<div class="wx_books_head" id="himglist">
					</div>
					
					<div href="member_list.html" class="mui-icon icon-forward1 fs-1" onclick="gomember()" id="cylist">3成员</div>
				</div>
			</div>
			<div class="divcontent">
			<div class="mui-segmented-control ">
			    <a class="mui-control-item mui-active ws-item" href="#item1">文章</a>
			    <a class="mui-control-item  ws-item" href="#item2">我的</a>
			</div>
			<div class="mui-slider ws_slider">
			    <div class="mui-slider-group">
		        <div id="item1" class="mui-slider-item mui-control-content mui-active">
		        	<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-19
                    	描述：
                   
		        	<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="flex-jcsb-aifs">
							<div class="flex1"  onclick="setdynamic()">
						    	<div class="ws_article_head mui-col-xs-2 mui-col-sm-2 ">
						    		<div>
						    			<img class="borrad50" src="../images/101.jpg" alt="" />
						    		</div>
						    	</div>
						    	<div class="mui-col-xs-10 mui-col-sm-10 flex2"><div>名字</div>
						   			<div>标题</div>
						    		<div class="ws_article_img"></div>
						    		<div>名字</div>
						    	</div>
					    	</div>
					    	<div class="deldiv">
								删除
							</div>
							</div>
						</li>
						</ul>
		        	 -->
		        </div>
		       </div> 
		    </div>    
		   	
		  	<div class="ws_bottom" >
		  		<div class="ws_33 bright" onclick="release()">
					 <span>发布</span>
				</div>
				<div class="ws_33 bright" onclick="gobook4()">
					 <span>查看</span>
				</div>
		  		<div class="ws_33" onclick="godynamic()">
		  			 <span>添加</span>
		  		</div>
		  	</div>
			</div>
		   </div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" charset="UTF-8">
			var count = 0,bid = 0,is_me = 1,page = 1,fid = 0;
			var item2Show = false,item3Show = false;//子选项卡是否显示标志
			window.onload = function(){
				var list = getrequest();
				bid = list.bid;
				var num = getmath();
				var books_top = document.getElementsByClassName("ws_books_top")[0];
				books_top.style.backgroundImage = "url(../bookbj/book-bj"+num+".png)";
				getbookdel(bid);
				mui('.mui-segmented-control').on('tap', 'a',  function(event) {
					var aherf = this.getAttribute('href').split("").slice(-1)[0];
					is_me = aherf;
					getbookdel(bid);
				});
			}
			
			window.addEventListener('refresh1',function(e){
				getbookdel(bid);
				
			})
			function release(){
				var btnArray = ['否', '是'];
				mui.confirm('发布后将不能修改，确认？',"提交发布", btnArray, function(e) {
			        if (e.index == 1) {
		        		let data = {
							url:"/api/Book/book_become",
							data:{
								access_token : acctoken()||"",
								bid:bid||"",
								id:fid||"",
								introduction:''
							}
						}
							ajax(data,function(res){
								if(res.code == -1){
									mui.toast(res.message);
								}
								if(res.code == 1){
									console.log(res);
									mui.toast("发布成功！");
								}
							})
			        }					   
							});
			}
			function setdynamic(clickbid,clickid){
				let list = {bid:clickbid,cid:clickid}
				mui.openWindow({
							url: '../dynamic/dynamic.html?bid='+clickbid+'&cid='+clickid,
							id: 'dynamic',
							extras:list
				})
			}
			
			function getbookdel(id){
				let data = {
					url:"/api/Book/book_info",
					data:{
						access_token : acctoken()||"",
						bid:bid,
						is_me:is_me||1,
						page:page,
					}
				};
				ajax(data,function(res){
					console.log("书本详情",res);
					if(res.code == -1){
						mui.toast(res.message);
					}
				
					if(res.code == 1){
						setbookdel(res.data[0])
					}
				})
			}
			
			function setbookdel(list){
				
						fid = list.cover_list[0].id;
						let str = "";
						str = '<div class="mui-col-xs-4 mui-col-sm-4"><div class="ws_books_img">';
						
						str += '<img src="'+list.book_info.cover_image+'" alt="">'+
						'<div class="ws_books_title"></div></div></div>'+
						'<div class="mui-col-xs-8 mui-col-sm-8 flex2"><div class="bname">'+
						list.book_info.title+
						'</div><div class="zname">'+
						list.member[0].nickname + 
						'</div><div class="wx_books_head" id="himglist">';
						for(let i = 0; i < list.book_info.users_list.length;i++){
							if(list.book_info.users_list[i].head_img){
								str+='<img src="' + list.book_info.users_list[i].head_img +'">';
							}else{
								str+='<img src="../images/user-photo.png">';
							}
						}
						str+='</div><div class="lipay">'+
						'<div href="member_list.html" class="mui-icon icon-forward1 fs-1"'+
						' onclick="gomember()" id="cylist">'+
						(list.book_info.users_list.length) +
						'成员</div>'+
						'<div class="fs-1" onclick="gopayment('+list.book_info.id+')">立即购买</div></div>'+
						'</div>';
						g("topdivid").innerHTML = str;
						let hstr =  "";
						if(list.article.length > 0){
							hstr = '<ul class="mui-table-view">';
							for (let i = 0; i < list.article.length;i++) {
								
								hstr += '<li class="mui-table-view-cell" >'+
								'<div class="flex-jcsb-aifs">'+
								'<div class="flex1" onclick="setdynamic('+list.article[i].bid+','+list.article[i].id+')">'+
					                	'<div class="ws_article_head mui-col-xs-3 mui-col-sm-3 ">';
					                	if(list.article[i].head_img){
					                				hstr += '<div><img class="borrad50" src="' + list.article[i].head_img  + '" alt="" /></div></div>';
					                	}else{
					                		hstr +='<div><img class="borrad50" src="../images/user-photo.png" alt="" /></div></div>';
					                	}
					                	hstr += '<div class="mui-col-xs-9 mui-col-sm-9 flex2"><div>'+ list.article[i].nickname +'</div>'+
					                	'<div>'+ list.article[i].title +'</div>'+
					                	'<div class="ws_article_img"></div><div>'+
					                	list.book_info.creatime+
					                	'</div></div></div><div class="deldiv" onclick="delbook_article('+list.article[i].bid+','+list.article[i].id+')">删除</div></div></li>';
						    	
								}
							hstr += '</ul><div class="gd"></div>';
						}else{
							hstr = '<div class="noarticle flex6"><span class="ws_100">'+
									'<img src="../images/noarticle.png" alt="" /></span></div>';
						}
							
						$("#item1").html(hstr);
				
				
				
			}
			
			
			function delbook_article(bookbid,bookzid){
				mui.confirm("是否确认删除？","",["取消","确认"],function(e){
					if(e.index == 1){
						let data = {
					url:"/api/Book/book_article_del",
					data:{
						access_token:acctoken(),
						bid:bookbid,
						id:bookzid
					}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast("书本删除成功");
						getbookdel(bookbid);
						
					})
					}
					
				})
				
				
				
			}
			function gobook4(){
				let list = {bid:bid}
				mui.openWindow({
							url: '../dynamic/book4.html?id='+bid,
							id: 'book4',
							extras:list
				});
			}
			function gid(id){
				return document.getElementById(id);
			}
			function gcs(name){
				return document.getElementsByClassName(name);
			}
			function godynamic(){
				let list = {bid:bid};
				mui.openWindow({
							url: '../dynamic/dynamic.html?bid=' +bid,
							id: 'dynamic',
							extras:list
				});
			}
			function seting(){
				let list = {bid:bid}
				mui.openWindow({
							url: 'setting.html?bid='+bid,
							id: 'setting',
							extras:list
				});
			}
			function gopayment(bookid){
				//make/payment.html?bookid
				mui.alert("功能开发中");
				return;
				mui.openWindow({
					url: '../make/payment.html?bookid='+bookid,
					id: 'home_details',
					extras: {
				        bookid: bookid
				    }
				});
			}
			function yaoqing(){
				let list = {bid:bid}
				mui.openWindow({
							url: 'invitation.html?bid='+bid,
							id: 'invitation',
							extras:list
				});
			}
			function gomember(){
				let list = {bid:bid}
				mui.openWindow({
							url: 'member_list.html?bid='+bid,
							id: 'member_list',
							extras:list
				});
			}
		</script>
	</body>


</html>